﻿@{
    /**/

    Layout = null;
}
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - beforeClick / onClick</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="~/Scripts/ZTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="~/Scripts/ZTree/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/ZTree/js/jquery.ztree.all.js"></script>
    <script>

        var $settring = {
            data: {
                key: {
                    title: "name"
                },
                simpleData: {
                    idKey: "Id",
                    pIdKey: "ParentId"
                }
            },
            callback: {
                onClick: onClick
            }
        }

        $(function () {
            $.post("/ZTree/GetPosition",
                function (data, textStatus, jqXHR) {
                    var dd = $.parseJSON(data);
                    $.fn.zTree.init($("#ztreeDome"), $settring, dd);
                },
                "json"
            );
        })

        function onClick(event, treeId, treeNode) {
            $("#btnAddRule").show();
        }

        function onAddRule() {
            var zTree = $.fn.zTree.getZTreeObj("ztreeDome");
            ndes = zTree.getSelectedNodes();
            $.post("/ZTree/AddRule", { name: "value" },
                function (data, textStatus, jqXHR) {

                },
                "dataType"
            );
        }
    </script>
</HEAD>
<body>
    <input type="button" name="AddRule" value="添加规则" id="btnAddRule" hidden="hidden" onclick="onAddRule()" />

    <ul id="ztreeDome" class="ztree"></ul>

</body>
</HTML>